<template>
	<view class="wrap">
			<u-navbar title-color="#00000" title-size="32rpx" :is-back="false" background="none" :title="infos.appName">
		</u-navbar>
		<image class="banner" :src="bannerImg" mode=""></image>
		<view class="list">
			<u-form :model="form" ref="uForm1">
				<u-form-item  v-if="isPassword" prop="phone">
					<view class="list-call">
						 <u-input type="number" v-model="form.phone" maxlength="11" placeholder="请输入手机号" /> 
					</view>
				</u-form-item>
				<u-form-item  v-if="isPassword" prop="password">
					<view class="list-call">
						 <u-input :type="!showPassword?'password':'text'"  :password-icon="false" v-model="form.password" maxlength="32" placeholder="请输入密码" /> 												
						 <image style="margin-left: 20rpx;" class="u-icon-right"
						 	:src="'/static/aidex/login/eye_' + (showPassword ? 'open' : 'close') + '.png'"
						 	@click="showPass()"></image>
					</view>
				</u-form-item>
				
				<u-form-item  v-if="!isPassword" prop="phone">
					<view class="list-call">
						 <u-input type="number" v-model="form.phone" maxlength="11" placeholder="请输入手机号" /> 
					</view>
				</u-form-item>
				<u-form-item  v-if="!isPassword" prop="code">
					<view class="list-call">
						 <u-input style="flex: 1;" type="number" v-model="form.code" maxlength="6" placeholder="请输入验证码" /> 
						<view class="code">
							<view class="line"></view>
							<view class="btns" @click="getCode">{{Tips}}
							</view>
						</view>
					</view>
					
					
				</u-form-item>
			</u-form>
		</view>
		<u-button class="button" @click="submit1" :ripple="true" ripple-bg-color="#d7d8da">登录</u-button>
		<view>

			<view v-if="infos.description" class="tips">
				{{infos.description}}
			</view>
			<view @click="isPassword=!isPassword" class="register-link">
				{{isPassword?'可切换到手机验证码登录':'可切换到账号登录'}}
			</view>
		</view>
		<u-verification-code endText="获取验证码" startText="获取验证码" seconds="60" ref="uCode" @change="codeChange">
		</u-verification-code>
	</view>
</template>
<script>
	export default {
		data() {
			return {

				form: {
					phone: '17888888888',
					password: 'a12345678',
					code:''
				},
				rules1: {
					
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {

							if (value.length == 11) {
								let phoneCheck = /^(?!10|11|12|14)\d{11}$/
								console.log(phoneCheck.test(value), '&&&&&&&');
								return phoneCheck.test(value);
							}

						},
						message: '手机号码输入有误',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
					
				},
				bannerImg: '',
				isPassword: true,
			
				showPassword: false,
				Tips: '获取验证码',
				yzmStatus: false,
				codeTips: '',
				codes: "",
				infos: null

			};
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
			this.$refs.uForm1.setRules(this.rules1);
		},
		onShow() {
			this.adListFn() //按条件查询广告列表信息
			let that = this
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes, 8888854);
					that.codes = loginRes.code
				}
			});

			this.$u.api.aboutUs().then(res => {
				this.infos = res?.data
				console.log(res?.data, 555555);
			});
		},
		methods: {


			//按条件查询广告列表信息
			adListFn() {
				this.$u.api.adList({
						entityCountLimit: 1,
						groupCode: 'MINIAPP_LOGIN',
					})
					.then(res => {
						console.log(res?.data?. [0]?.imageUrl, 666666);
						this.bannerImg = res?.data?. [0]?.imageUrl
					});
			},
			codeChange(text) {

				this.Tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					console.log(this.phone, 444444444444);
					if (!this.form.phone) {
						this.$u.toast('请输入手机号');
						return
					}

					let phoneCheck = /^(?!10|11|12|14)\d{11}$/

					if (!phoneCheck.test(this.form.phone)) {
						this.$u.toast('手机号码输入有误');
						return
					}

					// if (!this.$u.test.mobile(this.phone)) {
					// 	this.$u.toast('手机号码输入有误');
					// 	return
					// }
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})

					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	this.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000)

					this.$u.api.sendCode({
							mobile:this.form.phone,
						})
						.then((res) => {

							if (res.code == 'ok') {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();

							} else {

								this.$u.toast(res.msg);
								// console.log("请求数据失败");
							}
						});

				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			showPass() {
				this.showPassword = !this.showPassword;
			},

			submit1(loginType) {


				this.$refs.uForm1.validate(valid => {
					if (valid) {
						this.$u.api.login({
								username: this.form.phone,
								password: this.form.password,
								mobile: this.form.phone,
								captcha: this.form.code
							})
							.then(res => {

								this.$u.vuex("vuex_openId", res?.data?.openId);

								if (res.msg) {
									this.$u.toast(res.msg);
								}
								if (res.code == 'ok') {

									this.$u.vuex("vuex_token", res.data);
									this.$u.api.getWechatOpenId({
											code: this.codes,
										})
										.then(res1 => {

											console.log(res?.data, '^^^^^^^^^^^^66');

											if (res?.data?.needAlterPassword == 1) {

												setTimeout(() => {
													uni.reLaunch({
														url: '/pages/sys/user/pwd'
													});
												}, 500);

											} else {
												setTimeout(() => {
													uni.switchTab({
														url: '/pages/sys/home/index'
													});
												}, 500);
											}


										});

									// needAlterPassword  是否需要修改密码 0否  1是

								}

							});

					} else {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
					}
				});


			}
		}
	};
</script>
<style lang="scss">
	.code {
		display: flex;
		align-items: center;

		.line {
			width: 2rpx;
			height: 28rpx;
			background: #E4E4E4;
		}

		.btns {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 24rpx;
			color: #FA4A53;
			line-height: 40rpx;
			text-align: justified;
			font-style: normal;
			text-transform: none;
			padding-left: 14rpx;
		}


	}

	/deep/ .u-border-bottom:after,
	/deep/ .u-border-left:after,
	/deep/ .u-border-right:after,
	/deep/ .u-border-top-bottom:after,
	/deep/ .u-border-top:after,
	/deep/ .u-border:after {
		border: none !important;
	}
	
	/deep/ .u-form-item__message{
		padding-left: 0 !important;
	}
	/deep/ u-input{
		width: 100%;
	}


	/deep/ .u-title {
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi !important;
		font-weight: 500 !important;
	}

	.tips {
		padding: 30rpx 0 0;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #a5a7a7;
		// line-height: 40rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		text-align: center;
	}

	.wrap {
		background: url("https://oss.6mate.cn/mini/bg.png") no-repeat;
		background-size: cover;
		width: 100%;
		height: 100vh;
	}

	.banner {
		height: 681rpx;
		width: 100%;
		display: block;
		margin-top: -150rpx;
	}

	.list {
		margin: 26rpx 80rpx 30rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding: 0 32rpx 0 30rpx;
		height: 80rpx;
		background: rgba(232, 230, 229, 0.12);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		border: 2rpx solid #F1F1F1;
	}

	.list-call .u-input {
		flex: 1;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #0F1417;
		// line-height: 40rpx;
		text-align: justified;
		font-style: normal;
		text-transform: none;
	}

	.list-call .u-icon-right {
		// color: #aaaaaa;
		width: 48rpx;
		height: 48rpx;
	}

	.button {

		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 28rpx;
		color: #FAFDFF;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		height: 80rpx !important;
		background: #FA4A53 !important;
		box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		margin: 0 80rpx 0;
		overflow: hidden;

		.u-size-default {
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			width: 100%;
			height: 100%;
			background-color: #FA4A53 !important;
			color: #FAFDFF !important;
			border-color: none !important;
		}
	}

	.logo {
		width: 80%;
		font-size: 64rpx;
		color: #5473e8;
		margin: 80rpx auto 80rpx auto;
	}

	.register-link {
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #FA4A53;
		line-height: 40rpx;
		font-style: normal;
		text-decoration-line: underline;
		text-transform: none;
		margin: 180rpx 0 0;
		text-align: center;
	}

	.reg-link {
		display: inline-block;
		color: #5473e8;
	}
</style>
